<template>
  <div class="main flex">
    <div class="left">
      <el-row type="flex" justify="space-between" class="mt15">
        <el-input size="mini" clearable v-model="form.resourceName" placeholder="请输入资产名"></el-input>
        <el-input size="mini" style="margin: 0 10px;" clearable v-model="form.hostName" placeholder="请输入主机名"></el-input>
        <el-button size="mini" type="primary" @click="handleSelect">查询</el-button>
      </el-row>
      <div class="abstract">
        <custom-head text="机房摘要">
          <div>
            共<span class="primary-color">{{ selecData.length }}</span>个机房
          </div>
        </custom-head>
        <div style="height: 120px" class="info2" >
          
          <div class="pane-con">
            <div class="btns">
              <el-badge class="badagebtn" :max="99" :value="parseInt(index.num) || 0" v-for="index in selecData" :key="index.resourceId"> 
                <el-button class="abc"  :class="{'selected': selectedButton === index.resourceId}" 
                          @click="changeRoom(index.resourceId)">
                          <div class="abc_tx">{{index.title}}</div>
                          </el-button>
              </el-badge>
              <!-- <div v-for="i in selecData" :label="i.resourceId" :key="i.resourceId" class="btn-con">
                <div class="btn">
                  <input hidden type="radio"  onclick="clickTaskHandler(i)">
                  <label >{{i.title}}</label>
                </div>
              </div> -->



            </div>
          </div>
        </div>
        <!-- <el-form :model="form" :rules="rules" ref="form" label-width="52px" class="form">
          <el-form-item label="机房" prop="name">
            <el-select size="mini" v-model="form.selectValue" @change="changeRoom(form.selectValue)" placeholder="请选择机房"
              style="width: 100%;">
              <el-option :label="item.title" :value="item.resourceId" v-for="item in selecData" />
            </el-select>
          </el-form-item>
        </el-form> -->
        <!-- <div class="address">
          机房位置：{{ roomInfo.position }}
        </div> -->
        <div class="info">
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/box.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ roomInfo.totalCapacity || 0 }}</div>
              <div class="text-ov">空间总数量</div>
            </div>
          </div>
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/cabinet.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ roomInfo.totalCabinetCount || 0 }}</div>
              <div>机柜数量</div>
            </div>
          </div>
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/source.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ roomInfo.onShelfAssets || 0 }}</div>
              <div class="text-ov">在架资产数量</div>
            </div>
          </div>
          <div class="flex-ac ">
            <div class="bg">
              <img src="@/assets/computerRoom/monitor.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ roomInfo.totalAlertCount || 0 }}</div>
              <div>监控项</div>
            </div>
          </div>
          <div class="flex-ac ">
            <div class="bg">
              <img src="@/assets/computerRoom/succes.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ roomInfo.normalCount || 0 }}</div>
              <div>正常项</div>
            </div>
          </div>
          <div class="flex-ac">
            <div class="bg">
              <img src="@/assets/computerRoom/error.png" alt="" srcset="">
            </div>
            <div>
              <div class="num">{{ roomInfo.deviceAlertCount || 0 }}</div>
              <div>异常项</div>
            </div>
          </div>
        </div>
      </div>
      <div class="alarmInfo">
        <el-row type="flex" justify="space-between">
          <custom-head text="当前告警"></custom-head>
          <el-button size="mini" v-hasPerm="['confirm']" type="primary" @click="confirm"
            v-show="alarmList.length">一键确认</el-button>
        </el-row>
        <div class="wrap">
          <div v-for="item in alarmList">
            <div class="block">
              <div><i class="el-icon-time"></i>时间:<span>{{ item.occurTime }}</span></div>
              <div> <img src="@/assets/computerRoom/alarm.png" alt="" srcset="">级别:<span :class="getLevel(item.level)">{{
                item.alarmLevel }}</span>
              </div>
              <div> <img src="@/assets/computerRoom/assets.png" alt="" srcset="">资产:<span>{{ item.alarmType }}</span>
              </div>
              <div class="text-ov"><i class=" el-icon-document"></i>内容:<span :class="getLevel(item.level)">{{
                item.alarmDesc }}</span>
              </div>
            </div>
          </div>
          <el-empty :image-size="40" v-if="alarmList.length == 0"></el-empty>
        </div>
      </div>
    </div>
    <div class="right">
      <!-- <div class="nav-bar">
        <el-menu text-color="#666" active-text-color="#21B794" :default-active="activeIndex" class="el-menu-demo"
          mode="horizontal">
          <el-menu-item :index="item.id" v-for="(item) in navBar">{{ item.name }}</el-menu-item>
        </el-menu>
        <div>最近采集时间：2023年10月1日</div>
      </div> -->
      <div class="canvas-wrap">
        <wire-map :picId="getGId" v-if="form.selectValue" keyId="959056153"></wire-map>
      </div>
    </div>
  </div>
</template>
<script>
import { getMachineRoom, getMachineRoomInfo, getAlertList, searchResource, alterConfirm } from "@/api/computerRoomApi.js";
import WireMap from "@/tools/index.vue"
import customHead from "@/components/head/index.vue"

export default {
  components: { WireMap, customHead },
  data() {
    return {
      selectedButton: -1 ,// -1 表示没有选中的按钮
      selecData: [],
      form: {
        selectValue: "",//下拉选中
        hostName: "",//主机名
        resourceName: "",//资源名
      },
      alarmList: [],
      rules: {
        name: [
          { required: true, message: "请输入机房名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      navBar: [
        { name: "机房概览", id: "603" },
        { name: "机柜", id: "403" },
        { name: "温湿度", id: "644" },
        { name: "UPS", id: "622" },
        { name: "空调", id: "646" },
        { name: "门禁", id: "642" },
        { name: "漏水", id: "643" },
        { name: "蓄电池", id: "156" },
        { name: "供电", id: "628" },
      ],
      roomInfo: {},//机房信息
      activeIndex: "0",
      timer: 0,
    };
  },
  mounted() {
    this.activeIndex = this.navBar[0].id;
    // 获取机房列表
    getMachineRoom().then(res => {
      if (res.code == "200") {
        this.selecData = res.info;
        this.form.selectValue = this.selecData[0].resourceId;
        this.selectedButton = this.form.selectValue;
        // 机房详情
        this.changeRoom(this.form.selectValue)
        return
      }
    });
  },
  destroyed() {
    clearInterval(this.timer)
  },
  computed: {
    getGId: function () {
      let data = this.selecData.find(({ resourceId }) => resourceId == this.form.selectValue);
      if (data && data.gname) {
        return data.gname
      }
      return "27"
    }
  },
  methods: {
    changeRoom(id) {
      this.selectedButton = id;
      getMachineRoomInfo({ resourceId: id }).then(res => {
        if (res.code == "200") {
          this.roomInfo = res.info;
          this.form.selectValue = id;
          // 获取告警列表
          this.getAlert(this.form.selectValue);
          if (this.timer) {
            clearInterval(this.timer)
          }
          this.timer = setInterval(() => {
            this.getAlert(this.form.selectValue);
            // this.getAlert(id);
          }, 10000)
          return
        }
      });
    },
    getLevel(l) {
      switch (l) {
        case 1:
          return "level1"
        case 2:
          return "level2"

        case 3:
          return "level3"

        default:
          return "level4"
      }
    },
    handleSelect() {
      if (!this.form.hostName && !this.form.resourceName) {
        this.message("请输入要查询的名称", 3)
        return
      }
      searchResource({
        roomResourceId: this.form.selectValue,
        hostName: this.form.hostName,
        resourceName: this.form.resourceName,
      }).then(res => {
        if (res.code == "200") {
          if (res.info && res.info[1]) {
            const udetail = res.info[1].udetailList.find(({ isBright }) => isBright)
            if (udetail) {
              this.$router.push({ path: '/computerRoom/asset', query: { devId: udetail.resourceTypeId, active: "1" } })
            }
          }
        }
      })
    },
    getAlert(resourceId) {
      getAlertList({
        number: 50,
        resourceId
      }).then(res => {
        if (res.code == "200") {
          this.alarmList = res.info
          return
        }
        this.message(res.msg, 3)
      });
    },
    confirm() {
      alterConfirm({
        resourceId: this.form.selectValue
      }).then(res => {
        if (res.code == "200") {

        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  padding-left: 16px;
  margin: 0px auto;
  box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
  border-radius: 10px;
  background-color: #fff;

  .left {
    width: 27%;
    min-width: 27%;
    height: 100%;
    overflow: auto;
    padding-right: 16px;
    border-right: 1px solid #f0f0f0;

    .abstract {
      margin-top: 16px;
      // height: 350px;
      background: #f0f0f0;
      border-radius: 6px;
      padding: 15px;


      .subText {
        font-size: 14px;
        color: #666666;
      }

      .form {
        margin-top: 16px;

        .el-form-item {
          margin-bottom: 10px;
        }
      }

      .address {
        font-size: 14px;
        color: #000;
      }

      .info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .flex-ac {
          padding: 15px;
          background-color: #fff;
          width: 48%;
          height: 60px;
          margin-top: 15px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 15px;
          color: #666;
          box-shadow: 5px 0px 10px 0px rgba(165, 199, 194, 0.2);
          border-radius: 6px;

          >div:nth-child(1) {
            flex-shrink: 0;
          }

          >div:nth-child(2) {
            width: 70%;
          }

          .bg {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            flex-shrink: 0;

            img {
              width: 20px;
              height: 20px;
              margin: 10px auto;
              display: block;
            }
          }

          &:nth-child(1) .bg {
            background: rgba(0, 162, 255, 0.2);
          }

          &:nth-child(2) .bg {
            background: rgba(125, 74, 218, 0.2);
          }

          &:nth-child(3) .bg {
            background: rgba(0, 196, 171, 0.2);
          }

          &:nth-child(4) .bg {
            background: rgba(203, 162, 39, 0.2);
          }

          &:nth-child(5) .bg {
            background: rgba(20, 211, 78, 0.2);
          }

          &:nth-child(6) .bg {
            background: rgba(239, 110, 110, 0.2);
          }

          .num {
            font-size: 20px;
          }

          &:nth-child(1) .num {
            color: #00A2FF;
          }

          &:nth-child(2) .num {
            color: #7D4ADA;
          }

          &:nth-child(3) .num {
            color: #00C4AB;
          }

          &:nth-child(4) .num {
            color: #CBA227;
          }

          &:nth-child(5) .num {
            color: #21B795;
          }

          &:nth-child(6) .num {
            color: #EF6E6E;
          }
        }
      }
    }
  }

  .alarmInfo {
    margin-top: 15px;
    height: calc(calc(100% - 450px));
    background: #F0F0F0;
    border-radius: 6px;
    padding: 15px;

    .wrap {
      height: 90%;
      overflow: auto;
      margin-top: 10px;


      .block {
        background-color: #fff;
        border-radius: 6px;
        padding: 13px;
        margin-bottom: 10px;

        img {
          width: 12px;
          height: 12px;
          margin: 0 3px 0 1px;
        }

        div,
        i {
          color: #666;
          margin: 2px 0;
        }

        i {
          margin-right: 2px;
        }

        span {
          margin-left: 10px;
          color: #333;
        }

        .level1 {
          color: #000;
        }

        .level2 {
          color: #FF6B12;
        }

        .level3 {
          color: #F0CB00;
        }

        .level4 {
          color: #EA305C;
        }

      }
    }

  }
}

.right {
  flex: 1;
  overflow: auto;

  .canvas-wrap {
    width: 100%;
    height: 100%;
  }

  .nav-bar {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    align-items: center;
    border-bottom: 1px solid #F0F0F0;
  }
}

.el-menu.el-menu--horizontal {
  border-bottom: none !important;
}

.el-menu--horizontal>.el-menu-item {
  height: 40px;
  line-height: 40px;
  padding: 0px 15px;
}
      .badagebtn {

      }
      .badagebtn {
        margin-right: 30px;
      }
      .abc {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        border: 2px #56ca65 solid;
        border-color: #b9b4b4;
        display: inline-block;
        justify-content: center;
        align-items: center;
        background-color: rgb(255, 255, 255);
        // text-align: center;
        cursor: pointer;
        
        white-space: normal; /* 允许文字换行 */
        
      }

      .abc_tx{
        width: 43px;
        text-align: center;
      }

  .btns {
			padding: 20px;
			box-sizing: border-box;
			display: flex;
			flex-wrap: nowrap;
      // justify-content: center;
      overflow-x: auto;
      margin-bottom: 20px;
			.btn-con {
				margin-left: 20px;
				margin-bottom: 20px;
				
			}
		}

  .pane-con {
			height: 100px;
      flex-direction:row;
		}

    .selected {
      background-color: #c0dbd4; /* 选中时的背景颜色 */
		  color: #0D8EFF; /* 选中时的文本颜色 */
		  border-color: #0D8EFF; /* 选中时的边框颜色 */
      /* 可以根据需求设置其他样式 */
    }
</style>
